/**
 *通用形列表
 */
<template>
    <div class="generalTabel">
        <GeneralTabelForm 
            v-model:formArr="formArr" 
            v-model:formDataNew="formDataNew" 
            v-model:formDataOriginal="formDataOriginal" 
            v-model:isFoldNum="isFoldNum" 
            @tabelSearch="tabelSearch" 
        />
        <GeneralTabelButton
            v-model:buttonArr="buttonArr" 
        />
        <GeneralTabelTabs
            v-model:tabArr="tabArr" 
            v-model:tabActiveName="tabActiveName" 
            @tabChange="tabChange" 
        />
        <GeneralTabelList
            v-model:tableObj="tableObj" 
            ref="generalTabelList"
        />
        <GeneralTabelPagination
            v-model:paginationObj="paginationObj"
        />
        <GeneralTabelDialog 
            v-model:dialogObj="dialogObj"
            @tabelSearch="tabelSearch" 
        />
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import {  } from '@/apis'
    import { isPhone } from '@/utils'

    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import { ElMessage } from 'element-plus'
    import {
        Lock,
        User,
        Monitor,
        Phone,
        Search,
        RefreshRight,
    } from '@element-plus/icons-vue'
    import GeneralTabelForm from './components/generalTabelForm/GeneralTabelForm.vue'
    import GeneralTabelButton from './components/generalTabelButton/GeneralTabelButton.vue'
    import GeneralTabelTabs from './components/generalTabelTabs/GeneralTabelTabs.vue'
    import GeneralTabelList from './components/generalTabelList/GeneralTabelList.vue'
    import GeneralTabelPagination from './components/generalTabelPagination/GeneralTabelPagination.vue'
    import GeneralTabelDialog from './components/generalTabelDialog/GeneralTabelDialog.vue'

    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const generalTabelList = ref(null) //这个先不用，用其他替代方案
    // onMounted(() => {
    //     console.log(generalTabelList.value)
    // })
    const formArr = defineModel<any>('formArr', {
        required: false,
        default: [
            
        ]
    })
    // formDataNew不用给值，里面会根据formArr的值来赋值，只是用作其他查询需要值，这个值在不点查询的情况也会根据输入框的改变而改变，所以除了点击查询以外用formDataOriginal
    const formDataNew = defineModel<any>('formDataNew', {
        required: false,
        default: {}
    })
    const formDataOriginal = defineModel<any>('formDataOriginal', {
        required: false,
        default: {}
    })
    const dialogObj = defineModel<any>('dialogObj', {
        required: false,
        default: {}
    })
    // 可以不用给值，里面有默认值
    const isFoldNum = defineModel<number>('isFoldNum', {
        required: false,
        default: 20
    })
    const buttonArr = defineModel<any>('buttonArr', {
        required: false,
        default: [
            
        ]
    })
    const tabArr = defineModel<any>('tabArr', {
        required: false,
        default: [
            
        ]
    })
    const tableObj = defineModel<any>('tableObj', {
        required: false,
        default: {
            tableData: [],
            tableColumn: [],
        }
    })
    const tabActiveName = defineModel<string>('tabActiveName', {
        required: false,
        default: ''
    })
    const paginationObj = defineModel<any>('paginationObj', {
        required: false,
        default: {
        }
    })
    // const props = withDefaults(defineProps<{
    //     isFoldNum?: number, 
    // }>(), {
    //     isFoldNum: 20,
    // })
    const emits = defineEmits<{
        // (e: 'update:isCollapse', data: boolean): void,
        'tabelSearch': [data: any],
        'tabChange': [data: any],
    }>()

    const tabelSearch = (val) => {
        emits('tabelSearch', val)
    }
    const tabChange = (val) => {
        emits('tabChange', val)
    }
    
</script>

<style lang="scss" scoped>
    .generalTabel {
        width: 100%;
        height: 100%;
        background: #fff;
        box-sizing: border-box;
        padding: 20px;
        text-align: left;
        display: flex;
        flex-direction: column;
    }
</style>